<template>
  <div class="layout-pd">
    <LimitsFrontEndPage style="padding: 0 !important" />
    <!-- 演示1：组件方式 -->
    <el-card shadow="hover" header="演示1：组件方式" class="mt15">
      <el-row class="mb10" style="color: #808080">单个权限验证（:value="xxx"）：</el-row>
      <div class="flex-warp">
        <Auth :value="'btn.add'">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="primary" size="default">
                <el-icon>
                  <ele-DocumentAdd />
                </el-icon>
                新增
              </el-button>
            </div>
          </div>
        </Auth>
        <Auth :value="'btn.edit'">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="info" size="default">
                <el-icon>
                  <ele-Edit />
                </el-icon>
                编辑
              </el-button>
            </div>
          </div>
        </Auth>
        <Auth :value="'btn.del'">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="danger" size="default">
                <el-icon>
                  <ele-Delete />
                </el-icon>
                删除
              </el-button>
            </div>
          </div>
        </Auth>
        <Auth :value="'btn.link'">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="success" size="default">
                <el-icon>
                  <ele-Link />
                </el-icon>
                跳转
              </el-button>
            </div>
          </div>
        </Auth>
      </div>

      <el-row class="mb10 mt10" style="color: #808080">多个权限验证，满足一个则显示（:value="[xxx,xxx]"）：</el-row>
      <div class="flex-warp">
        <Auths :value="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="primary" size="default">
                <el-icon>
                  <ele-DocumentAdd />
                </el-icon>
                新增
              </el-button>
            </div>
          </div>
        </Auths>
        <Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="info" size="default">
                <el-icon>
                  <ele-Edit />
                </el-icon>
                编辑
              </el-button>
            </div>
          </div>
        </Auths>
        <Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="danger" size="default">
                <el-icon>
                  <ele-Delete />
                </el-icon>
                删除
              </el-button>
            </div>
          </div>
        </Auths>
        <Auths :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="success" size="default">
                <el-icon>
                  <ele-Link />
                </el-icon>
                跳转
              </el-button>
            </div>
          </div>
        </Auths>
      </div>

      <el-row class="mb10 mt10" style="color: #808080">多个权限验证，全部满足则显示（:value="[xxx,xxx]"）：</el-row>
      <div class="flex-warp">
        <AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="primary" size="default">
                <el-icon>
                  <ele-DocumentAdd />
                </el-icon>
                新增
              </el-button>
            </div>
          </div>
        </AuthAll>
        <AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="info" size="default">
                <el-icon>
                  <ele-Edit />
                </el-icon>
                编辑
              </el-button>
            </div>
          </div>
        </AuthAll>
        <AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="danger" size="default">
                <el-icon>
                  <ele-Delete />
                </el-icon>
                删除
              </el-button>
            </div>
          </div>
        </AuthAll>
        <AuthAll :value="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item">
            <div class="flex-warp-item-box">
              <el-button type="success" size="default">
                <el-icon>
                  <ele-Link />
                </el-icon>
                跳转
              </el-button>
            </div>
          </div>
        </AuthAll>
      </div>
    </el-card>

    <!-- 演示2：指令方式 -->
    <el-card shadow="hover" header="演示2：指令方式（页面初始化时执行）" class="mt15">
      <el-row class="mb10" style="color: #808080">单个权限验证（v-auth="xxx"）：</el-row>
      <div class="flex-warp">
        <div class="flex-warp-item" v-auth="'btn.add'">
          <div class="flex-warp-item-box">
            <el-button type="primary" size="default">
              <el-icon>
                <ele-DocumentAdd />
              </el-icon>
              新增
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auth="'btn.edit'">
          <div class="flex-warp-item-box">
            <el-button type="info" size="default">
              <el-icon>
                <ele-Edit />
              </el-icon>
              编辑
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auth="'btn.del'">
          <div class="flex-warp-item-box">
            <el-button type="danger" size="default">
              <el-icon>
                <ele-Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auth="'btn.link'">
          <div class="flex-warp-item-box">
            <el-button type="success" size="default">
              <el-icon>
                <ele-Link />
              </el-icon>
              跳转
            </el-button>
          </div>
        </div>
      </div>

      <el-row class="mb10 mt10" style="color: #808080">多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）：</el-row>
      <div class="flex-warp">
        <div class="flex-warp-item" v-auths="['btn.addsss', 'btn.edit', 'btn.delsss', 'btn.linksss']">
          <div class="flex-warp-item-box">
            <el-button type="primary" size="default">
              <el-icon>
                <ele-DocumentAdd />
              </el-icon>
              新增
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item-box">
            <el-button type="info" size="default">
              <el-icon>
                <ele-Edit />
              </el-icon>
              编辑
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item-box">
            <el-button type="danger" size="default">
              <el-icon>
                <ele-Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auths="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item-box">
            <el-button type="success" size="default">
              <el-icon>
                <ele-Link />
              </el-icon>
              跳转
            </el-button>
          </div>
        </div>
      </div>

      <el-row class="mb10 mt10" style="color: #808080">多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）：</el-row>
      <div class="flex-warp">
        <div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item-box">
            <el-button type="primary" size="default">
              <el-icon>
                <ele-DocumentAdd />
              </el-icon>
              新增
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item-box">
            <el-button type="info" size="default">
              <el-icon>
                <ele-Edit />
              </el-icon>
              编辑
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item-box">
            <el-button type="danger" size="default">
              <el-icon>
                <ele-Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item" v-auth-all="['btn.add', 'btn.edit', 'btn.del', 'btn.link']">
          <div class="flex-warp-item-box">
            <el-button type="success" size="default">
              <el-icon>
                <ele-Link />
              </el-icon>
              跳转
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 演示3：函数方式 -->
    <el-card shadow="hover" header="演示3：函数方式（点击按钮查看有无权限，用于判断）" class="mt15">
      <el-row class="mb10" style="color: #808080">auth('xxx')、auths(['xxx','xxx'])、authAll(['xxx','xxx'])：</el-row>
      <div class="flex-warp">
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="primary" size="default" @click="onAuthClick">
              <el-icon>
                <ele-DocumentAdd />
              </el-icon>
              新增
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="info" size="default" @click="onAuthsClick">
              <el-icon>
                <ele-Edit />
              </el-icon>
              编辑
            </el-button>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="danger" size="default" @click="onAuthAllClick">
              <el-icon>
                <ele-Delete />
              </el-icon>
              删除
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="example/limitsFrontEndBtn">
import { defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { auth, auths, authAll } from '/@/utils/authFunction'

// 引入组件
const LimitsFrontEndPage = defineAsyncComponent(() => import('../page/index.vue'))
const Auth = defineAsyncComponent(() => import('/@/components/auth/auth.vue'))
const Auths = defineAsyncComponent(() => import('/@/components/auth/auths.vue'))
const AuthAll = defineAsyncComponent(() => import('/@/components/auth/authAll.vue'))

// 单个权限验证
const onAuthClick = () => {
  if (!auth('btn.add')) ElMessage.error('抱歉，您没有权限！')
  else ElMessage.success('恭喜，您有权限！')
}
// 多个权限验证，满足一个则为 true
const onAuthsClick = () => {
  if (!auths(['btn.add', 'btn.edit', 'btn.del', 'btn.link'])) ElMessage.error('抱歉，您没有权限！')
  else ElMessage.success('恭喜，您有权限！')
}
// 多个权限验证，全部满足则为 true
const onAuthAllClick = () => {
  if (!authAll(['btn.add', 'btn.edit', 'btn.del', 'btn.link'])) ElMessage.error('抱歉，您没有权限！')
  else ElMessage.success('恭喜，您有权限！')
}
</script>

<style scoped lang="scss">
.flex-warp {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0 -5px;
  .flex-warp-item {
    padding: 5px;
    .flex-warp-item-box {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
